<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="30">
          <template>
            <a-col :md="4" :sm="6">
              <a-form-item label="名称">
                <a-input
                  placeholder="请输入名称查询"
                  v-model="queryParam.servername"
                  :maxLength="20"
                ></a-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="4" :sm="6">
							<a-form-item label="按域筛选:">
								<a-select placeholder="请选择域" v-model="queryParam.regionId">
									<a-select-option v-for="item in regionList" :key="item.regionId" :value="item.regionId">
										{{item.name}}（{{item.state==='1'?'在线':(item.state==='2'?'离线':'禁用')}}）
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col> -->
            <!-- <a-col :md="4" :sm="6">
							<a-form-item label="类型:">
								<a-select placeholder="请选择类型" v-model="queryParam.modelId">
									<a-select-option v-for="item in modelList" :key="item.modelId" :value="item.modelId">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col> -->
            <!-- 	<a-col :md="4" :sm="6">
							<a-form-item label="状态:">
								<a-select placeholder="请选择状态" v-model="queryParam.modelId">
									<a-select-option v-for="item in modelList" :key="item.modelId" :value="item.modelId">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="4" :sm="6">
							<a-form-item label="通道工作状态:">
								<a-select placeholder="请选择通道工作状态" v-model="queryParam.modelId">
									<a-select-option v-for="item in modelList" :key="item.modelId" :value="item.modelId">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col> -->
            <!-- <a-col :md="4" :sm="6">
							<a-form-item label="是否在线:">
								<a-select placeholder="请选择是否在线" showSearch showArrow optionFilterProp="children"
									:getPopupContainer="(node) => node.parentNode" 
									:defaultActiveFirstOption="false" v-model="queryParam.online">
									<a-select-option value="1">是</a-select-option>
									<a-select-option value="0">否</a-select-option>
								</a-select>
							</a-form-item>
						</a-col> -->
          </template>
          <a-col :md="4" :sm="6">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                >重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <!-- <div class="table-operator" style="border-top: 5px">
      <a-button @click="addDev" type="primary" icon="plus">添加服务</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="setting" />
            <span>批量删除</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="setting" />
            <span>批量启用</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="setting" />
            <span>批量禁用</span>
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div> -->

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->

      <a-table
        :columns="columns"
        size="middle"
        :pagination="ipagination"
        :dataSource="dataSource"
        :loading="loading"
      >
        <!--  :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }" -->

        <!-- 	<span slot="action2" slot-scope="text, record">
					<a @click="cameraList(record)">管理</a>
				</span> -->

        <span slot="action" slot-scope="text, record">
          <!-- <a @click="editTran(record)">编辑</a> -->
          <!-- <a-divider type="vertical" /> -->
          <a href="javascript:;" @click="devDetail(record)">详情</a>
          <!-- <a-divider type="vertical" /> -->
          <!-- <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm> -->
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定此操作吗?"
            @confirm="() => changeStatus(record)"
          >
            <a>{{ record.used === "1" ? "禁用" : "启用" }}</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <tran-add-modal ref="modalForm" @ok="modalFormOk"></tran-add-modal>
    <tran-edit-modal
      ref="deveditmodal"
      :forms="this.forms"
      @ok="editModalOk"
      :id="this.id"
    ></tran-edit-modal>
    <tran-detail-modal
      ref="deveditmodaldetail"
      :forms="this.forms"
      @ok="editModalOk"
      :id="this.id"
    ></tran-detail-modal>
    <tran-edits-modal
      ref="deveditmodals"
      :forms="this.forms"
      @ok="editModalOk"
      :id="this.id"
    ></tran-edits-modal>
  </a-card>
</template>

<script>
import TranAddModal from "./modules/TranAddModal";
import TranEditModal from "./modules/TranEditModal";
import TranDetailModal from "./modules/TranDetailModal";
import TranEditsModal from "./modules/TranEditsModal";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getAction, postAction } from "@/api/manage";
import { ServiceList, ServiceDel, transcodingEdit } from "@/api/api";
const columns = [
  // {
  // 				title: 'ID',
  // 				align: "center",
  // 				dataIndex: 'serverID',
  // 				width: 60
  // 			},
  {
    title: "名称",
    align: "center",
    dataIndex: "servername",
    width: 80,
  },
  // {
  // 	title: '访问密钥',
  // 	align: "center",
  // 	dataIndex: 'secret',
  // 	width: 100
  // },
  // {
  // 	title: '类型',
  // 	align: "center",
  // 	dataIndex: 'serverType',
  // 	width: 50
  // },
  {
    title: "ip地址",
    align: "center",
    width: 60,
    dataIndex: "serverIP",
  },
  {
    title: "端口",
    align: "center",
    width: 60,
    dataIndex: "serverPort",
  },
  {
    title: "状态",
    align: "center",
    width: 60,
    dataIndex: "serverStatus",
    customRender: function (text) {
      if (text === "1") {
        return "在线";
      } else if (text === "2") {
        return "离线";
      } else if (text === "3") {
        return "禁用";
      }
    },
  },
  {
    title: "通道数",
    align: "center",
    width: 60,
    dataIndex: "capacity",
  },
  // {
  // 	title: '通道工作状态',
  // 	align: "center",
  // 	width: 60,
  // 	dataIndex: 'channelStatus',
  // 	// customRender: function(text) {
  // 	// 	if (text === '1') {
  // 	// 		return "在线"
  // 	// 	} else if (text === '2') {
  // 	// 		return "离线"
  // 	// 	} else if(text === '3'){
  // 	// 		return "禁用"
  // 	// 	}
  // 	// }
  // },
  {
    title: "工作状态",
    dataIndex: "working",
    align: "center",
    width: 80,
  },
  {
    title: "空闲状态",
    dataIndex: "free",
    align: "center",
    width: 80,
  },
  // {
  // 	title: '设备描述',
  // 	align: "free",
  // 	width: 60,
  // 	dataIndex: 'devDesc'
  // },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: {
      customRender: "action",
    },
    align: "center",
    width: 100,
  },
];
export default {
  name: "DevList",
  mixins: [JeecgListMixin],
  components: {
    TranAddModal,
    TranEditModal,
    TranDetailModal,
    TranEditsModal,
  },
  data() {
    return {
      description: "这是转码服务",
      queryParam: {
        servername: undefined,
        // name: undefined,
        // regionId: undefined,
        // modelId: undefined,
        // online: undefined
      },
      forms: {
        package_format: "",
        v_encode: "",
        v_bitrate: "",
        v_framerate: "",
        v_resolution: "",
        a_encode: "",
        a_samplerate: "",
        a_bitrate: "",
        profile: "",
        rc_mode: "",
      },
      modelList: [],
      regionList: [],
      columns: columns,
      // columns: [{
      // 		title: '服务ID',
      // 		align: "center",
      // 		dataIndex: 'serverID',
      // 		width: 60
      // 	},
      // 	{
      // 		title: '访问密钥',
      // 		align: "center",
      // 		dataIndex: 'secret',
      // 		width: 100
      // 	},
      // 	{
      // 		title: '服务类型',
      // 		align: "center",
      // 		dataIndex: 'serverType',
      // 		width: 50
      // 	},
      // 	{
      // 		title: '设备ip地址',
      // 		align: "center",
      // 		width: 60,
      // 		dataIndex: 'serverIP',
      // 	},
      // 	{
      // 		title: '监听端口',
      // 		align: "center",
      // 		width: 60,
      // 		dataIndex: 'serverPort'
      // 	},
      // 	{
      // 		title: '服务状态',
      // 		align: "center",
      // 		width: 60,
      // 		dataIndex: 'serverStatus'
      // 	},
      // 	{
      // 		title: '通道数量',
      // 		align: "center",
      // 		width: 60,
      // 		dataIndex: 'capacity',
      // 	},
      // 	{
      // 		title: '通道工作状态',
      // 		align: "center",
      // 		width: 60,
      // 		dataIndex: 'channelStatus',
      // 		// customRender: function(text) {
      // 		// 	if (text === '1') {
      // 		// 		return "在线"
      // 		// 	} else if (text === '2') {
      // 		// 		return "离线"
      // 		// 	} else if(text === '3'){
      // 		// 		return "禁用"
      // 		// 	}
      // 		// }
      // 	},
      // 	{
      // 		title: '空闲状态通道数量',
      // 		dataIndex: 'working',
      // 		align: "center",
      // 		width: 80
      // 	},
      // 	{
      // 		title: '设备描述',
      // 		align: "free",
      // 		width: 60,
      // 		dataIndex: 'devDesc'
      // 	},
      // 	{
      // 		title: '操作',
      // 		dataIndex: 'action',
      // 		scopedSlots: {
      // 			customRender: 'action'
      // 		},
      // 		align: "center",
      // 		width: 80
      // 	}
      // ],
      url: {
        list: "/serve/pageserve",
        delete: "/serve/deleteserve",
        // deleteBatch: "/dev/delete-batch",
        // usedBatch: "/dev/setDevUseds"
      },
    };
  },
  created() {
    //初始化数据，获取类型
    // getAction("/dev/model/list").then((res) => {
    // 	if (res.code == "00000") {
    // 		this.modelList = res.data
    // 	} else {
    // 		this.$message.warning("获取型号错误");
    // 		// this.close(this.modelList);
    // 	}
    // })
    // //初始化数据，获取域
    // getAction("/dev/getregions").then((res) => {
    // 	if (res.code == "00000") {
    // 		this.regionList = res.data
    // 	} else {
    // 		this.$message.warning("获取型号错误");
    // 	}
    // })
  },
  methods: {
    loadData() {
      // this.loading = true
      const pagetdo = {
        size: 10,
        current: 1,
        servername: this.queryParam.servername,
        serverType: 1, //转码服务
      };
      console.log(pagetdo);
      ServiceList(pagetdo)
        .then((res) => {
          if (res.code == "00000") {
            this.dataSource = res.data.records;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDelete(record) {
      console.log(record, "111");
      const params = {
        id: record.id,
      };
      ServiceDel(params).then((res) => {
        console.log(res, "22222");
        if (res.code == "00000") {
          console.log("删除成功");
          this.loadData();
        } else {
          console.log("删除失败");
        }
      });
    },
    addDev: function () {
      //初始化数据，获取类型
      // this.$refs.modalForm.typeList = [{"typeId":"c79881a1a5c24b40bdc4fc17016719c5", "typeDesc":"IPC"}];
      // getAction("/dev/type/list").then((res) => {
      // 	if (res.code == "00000") {
      // 		this.$refs.modalForm.typeList = res.data;
      // 	} else {
      // 		this.$message.warning("获取类型错误");
      // 	}
      // })
      this.$refs.modalForm.show();
      this.$refs.modalForm.disableSubmit = false;
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
    },
    // 编辑
    editTran: function (record) {
      if (record.encodeType == "FY-X10R-3538") {
        // console.log(11)
        // const params ={
        //   id:record.id
        // }
        // transcodingEdit(params).then((res) => {
        //   console.log(res);
        //   this.id = record.id;
        //   this.forms = res.data;
        //   this.forms.package_format = res.data.package_format;
        //   this.forms.v_encode = res.data.v_encode;
        //   this.forms.v_framerate = res.data.v_framerate.defaultValue;
        //   this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
        //   this.forms.a_encode = res.data.a_encode;
        //   this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
        //   this.forms.profile = res.data.profile;
        //   this.forms.rc_mode = res.data.rc_mode;
        //   console.log(this.forms.rc_mode)
        //   JSON.parse(res.data.jsonStr);
        //   console.log(JSON.parse(res.data.jsonStr))
        //   console.log(this.forms);
        // })
        // console.log(111)

        this.$refs.deveditmodals.show(record);
        console.log(this.$refs.deveditmodals, "===");
        this.$refs.deveditmodals.title = "编辑";
        this.$refs.deveditmodals.disableSubmit = false;
      } else {
        const params = {
          id: record.id,
        };
        transcodingEdit(params).then((res) => {
          console.log(res);
          this.id = record.id;
          this.forms = res.data;
          this.forms.package_format = res.data.package_format;
          this.forms.v_encode = res.data.v_encode;
          this.forms.v_framerate = res.data.v_framerate.defaultValue;
          this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
          this.forms.a_encode = res.data.a_encode;
          this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
          this.forms.profile = res.data.profile;
          this.forms.rc_mode = res.data.rc_mode;
          console.log(this.forms.rc_mode);
          JSON.parse(res.data.jsonStr);
          console.log(JSON.parse(res.data.jsonStr));
          console.log(this.forms);
        });
        console.log(111);
        this.$refs.deveditmodals.show(record);
        // console.log(this.$refs.deveditmodal, "===");
        this.$refs.deveditmodals.title = "编辑";
        this.$refs.deveditmodals.disableSubmit = false;
        // console.log(this.$refs.deveditmodal,888888);
      }
      console.log(record);

      this.$refs.deveditmodals.show(record);
      // console.log(this.$refs.deveditmodal, "===");
      this.$refs.deveditmodals.title = "编辑";
      this.$refs.deveditmodals.disableSubmit = false;
    },
    editModalOk() {
      // 修改 成功时，重载列表
      this.loadData();
    },
    // 详情
    devDetail: function (record) {
      if (record.encodeType == "FY-X10R-3538") {
        this.$refs.deveditmodals.show(record);
        console.log(this.$refs.deveditmodals, "===");
        this.$refs.deveditmodals.title = "详情";
        this.$refs.deveditmodals.disableSubmit = false;
      } else {
        const params = {
          id: record.id,
        };
        transcodingEdit(params).then((res) => {
          this.id = record.id;
          this.forms = res.data;
          this.forms.package_format = res.data.package_format; //码流封装方式
          this.forms.v_encode = res.data.v_encode; //视频编码
          this.forms.v_bitrate.defaultValue = res.data.v_bitrate.defaultValue; //视频码率
          this.forms.v_bitrate.groupValue = res.data.v_bitrate.groupValue; //视频码率
          
          this.forms.v_framerate.defaultValue = res.data.v_framerate.defaultValue; //视频帧率
          this.forms.v_framerate.groupValue = res.data.v_framerate.groupValue; //视频帧率

          this.forms.v_resolution = res.data.v_resolution; //视频分辨率
          this.forms.a_encode = res.data.a_encode; //音频编码
          this.forms.a_samplerate.defaultValue = res.data.a_samplerate.defaultValue; //音频采样率
          this.forms.a_samplerate.groupValue = res.data.a_samplerate.groupValue; //音频采样率

          this.forms.a_bitrate.defaultValue = res.data.a_bitrate.defaultValue; //音频码率
          this.forms.a_bitrate.groupValue = res.data.a_bitrate.groupValue; //音频码率

          this.forms.profile = res.data.profile; //编码档次
          this.forms.rc_mode = res.data.rc_mode; //码率控制

          console.log(this.forms, "========发请求获取forms的数据=========");
          // console.log(this.forms.rc_mode);
          JSON.parse(res.data.jsonStr);
          console.log(JSON.parse(res.data.jsonStr));
        });
        console.log(111);
        // this.$refs.deveditmodaldetail.show(record);
        // this.$refs.deveditmodaldetail.title = "详情";
        // this.$refs.deveditmodaldetail.disableSubmit = true;
      }
      console.log(record);
      this.$refs.deveditmodals.show(record);
      this.$refs.deveditmodals.title = "详情";
      this.$refs.deveditmodals.disableSubmit = false;
      console.log(this.$refs.deveditmodals.title, 88888);
    },
    handleMenuClick(e) {
      if (e.key == 1) {
        this.batchDel();
      } else if (e.key == 2) {
        this.batchOpt(this.url.usedBatch, "1");
      } else if (e.key == 3) {
        this.batchOpt(this.url.usedBatch, "0");
      }
    },
    changeStatus(record) {
      let objTemp = {};
      objTemp.used = record.used == 0 ? 1 : 0;
      objTemp.id = record.id;
      postAction("/serve/enable/forbidden", objTemp).then((res) => {
        if (res.code == "00000") {
          this.$message.success("修改成功");
          this.loadData();
        } else {
          this.$message.warning("修改失败:" + res.msg);
        }
      });
    },
    resetParam() {
      this.queryParam = {};
      this.queryParam.userType = undefined;
      this.loadData(1);
    },
    //路由跳转，打开新的tab
    // cameraList(record) {
    // 	console.log(JSON.stringify(record.devId))
    // 	//关闭tab
    // 	// this.$parent.closeRouteViewTab('dev/camera')

    // 	//跳转新tab
    // 	this.$router.push({
    // 		name:'/dev/camera',
    // 		params:{
    // 			devId: record.devId
    // 		}
    // 	})
    // 	// this.routerRefresh();//调用app.vue里面的routerRefresh()方法，完成摧毁和重建过程
    // }
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
